// 获取标签
// 开始按钮
var startBtn = document.querySelector(".start");
// 分数标签
var scoreEL = document.querySelector(".score");
// 进度条
var progressEL = document.querySelector(".progress");
// 灰太狼父级
var wolfsEl = document.querySelector(".wolfs");
// 开始菜单
var menuEL = document.querySelector(".menu");
// 结束菜单
var gameoverEL = document.querySelector(".gameover");
// --------------------------------------------------------
// 补充变量
// 获取进度条的宽度,
var progressWidth = progressEL.offsetWidth;
// 创建狼的计时器
var createWolfTime;
// 避免狼从一个洞口出来
var lastPosition = -1;
// 洞口位置
var positionArray = [{
    l: "98px",
    t: "115px"
}, {
    l: "17px",
    t: "160px"
}, {
    l: "15px",
    t: "220px"
}, {
    l: "30px",
    t: "293px"
}, {
    l: "122px",
    t: "273px"
}, {
    l: "207px",
    t: "295px"
}, {
    l: "200px",
    t: "211px"
}, {
    l: "187px",
    t: "141px"
}, {
    l: "100px",
    t: "185px"
}];
// ========================================================================
// 随机数
function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}
// 进度条倒计时
function progerssChange() {
    var progerssTimer = setInterval(function() {
        // 宽度减小
        progressWidth -= 2;
        // 一旦进度条为0
        if (progressWidth < 0) {
            // 游戏结束;
            // 显示gameover
            gameoverEL.style.display = "block";
            // 清除计时器
            clearInterval(progerssTimer)
                //
            clearInterval(createWolfTime);
            localStorage.fen = scoreEL.innerHTML;
            // console.log(localStorage.fen);

        }
        // 现有宽度赋值
        progressEL.style.width = progressWidth + "px";
    }, 100)
}
// progerssChange();
// 开始菜单
startBtn.onclick = function() {
        menuEL.style.display = "none";
        console.log(startBtn)
            //注意开启倒计时进度条
        progerssChange();
        // 开始随机出行灰太狼
        createWolfTime = setInterval(function() {
            var wolfImg = document.createElement("img");
            // 随机小灰灰和灰太狼;
            // 
            wolfImg.type = randomNumber(1, 100) > 80 ? "x" : "h";

            wolfImg.index = 0;

            // 3.3设置狼让他默认第一张
            wolfImg.src = "./img/" + wolfImg.type + wolfImg.index + ".png";
            // 3.5 狼随机出现的位置
            var positionIndex = randomNumber(0, 8);
            // 3.6 避免狼重复出现
            while (true) {
                if (positionIndex == lastPosition) {
                    positionIndex = randomNumber(0, 8);
                } else {
                    break;
                }
            }
            // 3.7 将可用的下标取出  设置狼出来的位置

            wolfImg.style.left = positionArray[positionIndex].l;
            wolfImg.style.top = positionArray[positionIndex].t;
            // 3.8添加标签  到父标签div中
            wolfsEl.appendChild(wolfImg);
            //3.9 将此此下标记录  用于下次随机位置对比做准备;
            lastPosition = positionIndex;
            // ===============动画===================
            // 上升计时器--
            wolfImg.uptimer = setInterval(function() {
                    // 切换图片
                    wolfImg.index++;
                    // 判断图片不要越界

                    if (wolfImg.index > 4) {
                        // 清除计时器
                        clearInterval(wolfImg.uptimer);
                        wolfImg.downFunction();

                    }
                    // 换路径
                    wolfImg.src = "./img/" + wolfImg.type + wolfImg.index + ".png";
                }, 100)
                // ----封装狼下降的
            wolfImg.downFunction = function() {
                wolfImg.donwTimer = setInterval(function() {
                    wolfImg.index--;
                    if (wolfImg.index == 0) {
                        // 清除下降计时;
                        clearInterval(wolfImg.donwTimer);
                        // 删除狼,因为没有打中
                        wolfImg.remove();
                    }
                    wolfImg.src = "./img/" + wolfImg.type + wolfImg.index + ".png";
                }, 100)
            }

            // ============================点击事件================================
            // 定义属性 用于记录狼是否被打击过;
            wolfImg.isFirst = 0; //代表没有被打击
            wolfImg.onclick = function() {
                // 先判断是否第一次打击
                if (wolfImg.isFirst == 1) {
                    // 停止代码
                    return;
                }
                // 如果代码能够执行到此处说明没打击过;
                console.log("打中了");
                wolfImg.isFirst = 1;
                // 清除计时器
                clearInterval(wolfImg.uptimer);
                clearInterval(wolfImg.donwTimer);
                // 判断打击狼的类型
                if (wolfImg.type == "h") {
                    scoreEL.innerHTML = parseInt(scoreEL.innerHTML) + 10;
                } else {
                    scoreEL.innerHTML = parseInt(scoreEL.innerHTML) - 10;
                }
                // 添加打击狼之后的动画效果  ----计时器完成
                // 先将图片换到第五张;
                wolfImg.index = 5;
                wolfImg.clickTimer = setInterval(function() {
                    wolfImg.index++;
                    wolfImg.src = "./img/" + wolfImg.type + wolfImg.index + ".png";
                    if (wolfImg.index > 8) {
                        clearInterval(wolfImg.clickTimer);
                        // 删除狼所在节点
                        wolfImg.remove();
                    }

                }, 100)

            }







        }, 1000)
    }
    // 封装